<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="图表" name="first">
        <!-- <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="68px">
            <el-form-item label="园所性质" prop="type">
              <el-select v-model="queryParams.type" placeholder="请选择园所性质" clearable size="small">
                <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="地区类型" prop="nature">
              <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
                <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form> -->
        <div style="display: flex;justify-content: space-between;margin-top:20px ;">
          <div ref="yuanNature" style="width:45%;height: 400px;"></div>
          <div ref="regionType" style="width:48%;height: 400px;"></div>
        </div>
        <div class="charts">
          <div v-show="analysisDataShow" ref="chartpDom" class="map_dom"></div>
          <div v-show="!analysisDataShow" class="noData">
            暂无数据，请重新搜索。。。
          </div>
          <!-- <div  ref="chartpDom2" class="map_dom"></div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="列表" name="second">
        <el-form :model="querys" ref="query" :inline="true" label-width="68px">
          <el-form-item label="园所性质" prop="type">
            <el-select v-model="querys.type" placeholder="请选择园所性质" clearable size="small">
              <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="地区类型" prop="nature">
            <el-select v-model="querys.nature" placeholder="请选择地区类型" clearable size="small">
              <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryLb">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQueryLb">重置</el-button>
          </el-form-item>
        </el-form>
        <div style="text-align: right; margin: 0 5px 10px 0">
          <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
        </div>

        <el-table v-loading="loading" :data="analysislb" style="height: 100%; width: 100%">
          <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
          <el-table-column align="center" label="园所名称" prop="schoolName"></el-table-column>
          <el-table-column align="center" label="入园人数" prop="attendance0"></el-table-column>
          <el-table-column align="center" label="入园率/%" prop="attendancePro"></el-table-column>
          <el-table-column align="center" label="请假人数" prop="attendance2"></el-table-column>
          <el-table-column align="center" label="请假率/%" prop="attendancePro2"></el-table-column>
          <el-table-column align="center" label="事假人数" prop="attendance4"></el-table-column>
          <el-table-column align="center" label="事假率/%" prop="attendancePro4"></el-table-column>
          <el-table-column align="center" label="病假人数" prop="attendance3"></el-table-column>
          <el-table-column align="center" label="病假率/%" prop="attendancePro3"></el-table-column>
        </el-table>
        <div style="height: 50px">
          <pagination v-show="querystotal > 0" :total="querystotal" :page.sync="querys.pageNum"
            :limit.sync="querys.pageSize" @pagination="getlbList" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { analysisList, analysisExport } from "@/api/qu/qyyerygk";
export default {
  name: "StudentCheck",
  data() {
    return {
      // 查询参数
      queryParams: {
        nature: "",
        type: "",
      },
      // 查询参数
      querys: {
        pageNum: 1,
        pageSize: 10,
        nature: "",
        type: "",
      },
      querystotal: 0,
      loading: false,
      typeOptions: [],
      schoolNatureOptions: [],
      schoolTypeOptions: [],
      charts: null,
      charts2: null,
      yuanNatureCharts: null, // 园所性质图表
      regionTypeCharts: null, // 地区类型图表
      activeName: "first",
      facilityList: [],
      analysisData: [],
      analysisDataShow: true,
      analysislb: [],
      legendData: [
        "入园人数",
        "入园率",
        "请假人数",
        "请假率",
        "事假人数",
        "事假率",
        "病假人数",
        "病假率",
      ],
      legendSelected: {
        入园人数: true,
        入园率: false,
        请假人数: false,
        请假率: false,
        事假人数: false,
        事假率: false,
        病假人数: false,
        病假率: false,
      },
    };
  },
  created() {
    this.getDicts("park_type").then((response) => {
      this.schoolTypeOptions = response.data;
    });
    this.getDicts("school_nature").then((response) => {
      this.schoolNatureOptions = response.data;
    });
    this.getList();
    this.getlbList();
  },
  mounted() {
    this.charts = this.$echarts.init(this.$refs.chartpDom);
    this.yuanNatureCharts = this.$echarts.init(this.$refs.yuanNature);
    this.regionTypeCharts = this.$echarts.init(this.$refs.regionType);
    this.yuanNatureChartsFun()
    this.regionTypeChartsFun()
    // this.charts2 = this.$echarts.init(this.$refs.chartpDom2);
    // this.chartsFun();
    // this.chartsFun2()
  },
  methods: {
    async getList() {
      try {
        const obj = {
          nature: this.queryParams.nature,
          schoolType: this.queryParams.type,
        };
        const data = await analysisList(obj);
        if (data.rows.length) {
          this.analysisDataShow = true;
          this.analysisData = data.rows.map((item) => {
            return {
              name: item.schoolName,
              attendance0: item.attendance0, //入园人数
              attendancePro: item.attendancePro, //入园率
              attendance2: item.attendance2, //请假人数
              attendancePro2: item.attendancePro2, //请假率
              attendance4: item.attendance4, //事假人数
              attendancePro4: item.attendancePro4, //事假率
              attendance3: item.attendance3, // 病假人数
              attendancePro3: item.attendancePro3, //病假人率
            };
          });
        } else {
          this.analysisDataShow = false;
          this.analysisData = [];
        }
        //  console.log(data);
        this.chartsFun();
      } catch (error) {
        console.log(error);
      }
    },
    async getlbList() {
      this.loading = true;
      try {
        const obj = {
          nature: this.querys.nature,
          schoolType: this.querys.type,
          pageNum: this.querys.pageNum,
          pageSize: this.querys.pageSize,
        };
        const data = await analysisList(obj);
        this.analysislb = data.rows;
        this.querystotal = data.total;
        this.loading = false;
      } catch (error) {
        console.log(error);
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQueryLb() {
      this.querys.pageNum = 1;
      this.getlbList();
    },
    /** 重置按钮操作 */
    resetQueryLb() {
      this.resetForm("query");
      this.handleQueryLb();
    },
    handleClick(tab, event) {
      // console.log(tab.label);
      this.analysisDataShow = true;
      if (tab.label == "图表") {
        (this.queryParams = {
          nature: "",
          type: "",
        }),
          this.getList();
        this.$nextTick(() => {
          this.charts.resize();
        });
      } else {
        (this.querys = {
          pageNum: 1,
          pageSize: 10,
          nature: "",
          type: "",
        }),
          (this.analysislb = []);
        this.querys.pageNum = 1;
        this.querys.pageSize = 10;
        this.getlbList();
      }
    },
    // 序号
    customeIndex(index) {
      return index + 1 + (this.querys.pageNum - 1) * this.querys.pageSize;
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.querys;
      this.$confirm("是否确认导出数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return analysisExport(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
    chartsFun() {
      const option = {
        // backgroud:'#333',
        title: {
          text: "园所出勤情况统计",
          //  subtext: '纯属虚构',
          left: "left",
        },
        dataZoom: {
          bottom: 0,
          show: 12 / this.analysisData.length < 1,
          // show:true,
          type: "slider",
          zoomLock: true,
          brushSelect: false,
          height: 8,
          // backgroundColor:'#000000',
          handleSize: "0",
          // moveHandleSize:1,
          // moveHandleStyle:{
          //   borderType:'dotted'
          // },
          sow: true,
          xAxisIndex: [0],
          start: 0,
          end: (12 / this.analysisData.length) * 100,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          selectedMode: "single",
          top: 0,
          left: "20%",
          data: this.legendData,
          selected: this.legendSelected,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              //x轴文字的配置
              show: true,
              rotate: 30,
              interval: 0, //使x轴文字显示全
            },
            data: this.analysisData.map((item) => item.name),
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        color: ["#2f89cf", "#27d08a"],
        series: [
          {
            name: "入园人数",
            type: "bar",
            // stack: 'Ad',
            emphasis: {
              focus: "series",
            },
            barWidth: "60",
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.analysisData.map((item) => item.attendance0),
          },
          {
            name: "入园率",
            type: "bar",
            // stack: 'Ad',
            barWidth: "60",
            emphasis: {
              focus: "series",
            },
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.analysisData.map((item) => item.attendancePro),
          },
          {
            name: "请假人数",
            type: "bar",
            // stack: 'Ad',
            emphasis: {
              focus: "series",
            },
            barWidth: "60",
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.analysisData.map((item) => item.attendance2),
          },
          {
            name: "请假率",
            type: "bar",
            // stack: 'Ad',
            emphasis: {
              focus: "series",
            },
            barWidth: "60",
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.analysisData.map((item) => item.attendancePro2),
          },
          {
            name: "事假人数",
            type: "bar",
            // stack: 'Ad',
            emphasis: {
              focus: "series",
            },
            barWidth: "60",
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.analysisData.map((item) => item.attendance4),
          },
          {
            name: "事假率",
            type: "bar",
            // stack: 'Ad',
            emphasis: {
              focus: "series",
            },
            barWidth: "60",
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.analysisData.map((item) => item.attendancePro4),
          },
          {
            name: "病假人数",
            type: "bar",
            // stack: 'Ad',
            emphasis: {
              focus: "series",
            },
            barWidth: "60",
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.analysisData.map((item) => item.attendance3),
          },
          {
            name: "病假率",
            type: "bar",
            // stack: 'Ad',
            emphasis: {
              focus: "series",
            },
            barWidth: "60",
            label: {
              show: true,
              position: "inside",
              fontSize: 15,
            },
            data: this.analysisData.map((item) => item.attendancePro3),
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      this.charts.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    // 园所性质
    yuanNatureChartsFun() {
      const option = {
        title: {
          text: "园所性质",
          //  subtext: '纯属虚构',
          left: "left",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // color: ["#2f89cf", "#27d08a"],
        legend: {
          top:40,
        },
        grid: {
          top:'25%',
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ['公办','民办'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "入园人数",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [120, 132],
            barWidth:'30%',
          },
          {
            name: "入园率",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [220, 182],
          },
          {
            name: "请假人数",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [150, 232],
          },
          {
            name: "请假率",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [1110, 277],
          },
          {
            name: "事假人数",
            type: "bar",
            stack: "Ad",
            data: [862, 1018],
            emphasis: {
              focus: "series",
            },
          },
          {
            name: "事假率",
            type: "bar",
            stack: "Ad",
            data: [862, 101],
            emphasis: {
              focus: "series",
            },
          },
          {
            name: "病假人数",
            type: "bar",
            stack: "Ad",
            data: [62, 18],
            emphasis: {
              focus: "series",
            },
          },
          {
            name: "病假率",
            type: "bar",
            stack: "Ad",
            data: [862, 1018],
            emphasis: {
              focus: "series",
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      this.yuanNatureCharts.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    // 地区类型
    regionTypeChartsFun() {
      const option = {
        title: {
          text: "地区类型",
          //  subtext: '纯属虚构',
          left: "left",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          top:40
        },
        grid: {
          top:'25%',
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ['城区园','乡镇园','农村园'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "入园人数",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [120, 132,200],
            barWidth:'30%',
          },
          {
            name: "入园率",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [220, 182,300],
          },
          {
            name: "请假人数",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [150, 232,400],
          },
          {
            name: "请假率",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [1110, 277,500],
          },
          {
            name: "事假人数",
            type: "bar",
            stack: "Ad",
            data: [862, 1018,600],
            emphasis: {
              focus: "series",
            },
          },
          {
            name: "事假率",
            type: "bar",
            stack: "Ad",
            data: [862, 101,700],
            emphasis: {
              focus: "series",
            },
          },
          {
            name: "病假人数",
            type: "bar",
            stack: "Ad",
            data: [62, 18,800],
            emphasis: {
              focus: "series",
            },
          },
          {
            name: "病假率",
            type: "bar",
            stack: "Ad",
            data: [862, 1018,900],
            emphasis: {
              focus: "series",
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      this.regionTypeCharts.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    //地图监听窗口缩放事件
    monitorResize() {
      this.charts.resize();
    },
  },
};
</script>
<style lang="scss" scoped>
.charts {
  // display: flex;
  // justify-content: space-between;
  margin-top: 50px;
  width: 1400px;
  height: 500px;

  // border: 1px red solid;
  .map_dom {
    width: 1400px;
    height: 500px;
    margin-bottom: 50px;
  }

  .noData {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
  }
}
</style>
